<template>
  <div class="time">
    <div class="left">
      <span :class="index == 0 ? 'active' : ''" @click="quickChnage(0)"
        >昨天</span
      >
      <span :class="index == 1 ? 'active' : ''" @click="quickChnage(1)"
        >今天</span
      >
      <span :class="index == 2 ? 'active' : ''" @click="quickChnage(2)"
        >当月</span
      >
      <span :class="index == 3 ? 'active' : ''" @click="quickChnage(3)"
        >上月</span
      >
    </div>
    <div class="right">
      <!-- <span>{{ title }}:</span> -->
      <el-select
        v-model="type"
        placeholder="请选择"
        class="wid110"
        @change="date_change"
      >
        <el-option
          v-for="item in options"
          :key="item.option"
          :label="item.label"
          :value="item.option"
        >
        </el-option>
      </el-select>
      <el-date-picker
        class="mg-l-16"
        v-model="date"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        @change="dateChange"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import {
  parseTime,
  getyesterday,
  getLastMonthAndDay,
  getLastWeekAndDay,
  getNowMonth,
} from "@/utils/index";
export default {
  props: {
    title: {
      type: String,
      default: "日期",
    },
    options: {
      type: Array,
      default: function () {
        return [
          { label: "配送日期", option: 1 },
          { label: "下单日期", option: 2 },
        ];
      },
    },
  },
  data() {
    return {
      parseTime,
      getyesterday,
      getLastMonthAndDay,
      getLastWeekAndDay,
      getNowMonth,
      date: [],
      type: 1,
      //  快捷选择
      index: 2,
    };
  },
  created() {
    let nowMonth = this.getNowMonth();
    let nowmonth1 = this.parseTime(new Date(nowMonth[0]), "{y}-{m}-{d}");
    let nowmonth2 = this.parseTime(new Date(nowMonth[1]), "{y}-{m}-{d}");
    this.date = [nowmonth1, nowmonth2];
  },
  methods: {
    // 快捷切换
    quickChnage(type) {
      this.index = type;
      switch (type) {
        case 0:
          // 昨天
          let time = this.getyesterday();
          let start = this.parseTime(new Date(time[0]), "{y}-{m}-{d}");
          let end = this.parseTime(new Date(time[1]), "{y}-{m}-{d}");
          this.date = [start, end];
          break;
        case 1:
          // 今天
          let a = parseTime(new Date(), "{y}-{m}-{d}");
          this.date = [a, a];
          break;
        case 2:
          // 当月
          let nowMonth = this.getNowMonth();
          let nowmonth1 = this.parseTime(new Date(nowMonth[0]), "{y}-{m}-{d}");
          let nowmonth2 = this.parseTime(new Date(nowMonth[1]), "{y}-{m}-{d}");
          this.date = [nowmonth1, nowmonth2];
          break;
        case 3:
          // 上月
          let lastmonth = this.getLastMonthAndDay();
          let lastmonth1 = this.parseTime(
            new Date(lastmonth[1]),
            "{y}-{m}-{d}"
          );
          let lastmonth2 = this.parseTime(
            new Date(lastmonth[0]),
            "{y}-{m}-{d}"
          );
          this.date = [lastmonth1, lastmonth2];
          break;
      }
      this.sendDate();
    },

    //日期选择事件
    dateChange(val) {
      this.index = -1;
      let start = new Date(val[0]).getTime();
      let end = new Date(val[1]).getTime();
      let diff = end - start;
      if (diff > 60 * 24 * 60 * 60 * 1000) {
        this.$message.error("搜索范围时间跨度不得大于2个月");
        this.quickChnage(2);
        return;
      }
      this.sendDate();
    },
    date_change() {
      this.sendDate();
    },
    // 传值
    sendDate() {
      this.$emit("getdate", {
        date: this.date,
        date_type: this.type,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.time {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 0 15px;
  .left {
    span {
      display: inline-block;
      width: 70px;
      height: 30px;
      border: 1px solid #b9b9b9;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      color: #151515;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        border: 1px solid $green;
        color: $green;
      }
      &.active {
        border: 1px solid $green;
        color: $green;
      }
    }
  }
  .right {
    margin-left: 80px;
    display: flex;
    align-items: center;
    span {
      font-size: 16px;
      color: #4a4a4a;
    }
  }
}
</style>
